<script lang="ts" setup>
import type {
  AssetDetailResponse,
  AssetLifecycleVo,
} from '#/api/kingtown/types';

import { defineEmits, defineProps, ref, watch } from 'vue';

import { listLifecycleRecordApi } from '#/api/kingtown';
import CustomTitle from '#/views/asset/component/CustomTitle.vue';

const props = withDefaults(
  defineProps<{
    asset: AssetDetailResponse;
    open?: Boolean;
    refreshKey: number;
  }>(),
  {
    open: false, // 默认值
  },
);
const emit = defineEmits(['close']);

const loading = ref<boolean>(false);
const lifecycleList = ref<AssetLifecycleVo[]>([
  {
    id: '1',
    eventType: '盘点',
    eventContent: '已盘点，字段【资产名称】从【测试名称】变更为【正式名称】',
    eventOperator: '18768172795',
    createTime: '2025-08-18 17:26:22',
  },
  {
    id: '2',
    eventType: '盘点',
    eventContent: '已盘点，字段【资产名称】从【测试名称】变更为【正式名称】',
    eventOperator: '18768172795',
    createTime: '2025-08-18 17:26:22',
  },
]);
watch(
  () => props.open,
  (newVal, oldVal) => {
    if (newVal && !oldVal) {
      console.log('子组件被打开，开始查询数据...');
      fetchData();
    }
  },
  { immediate: false },
);

const onClose = () => {
  emit('close');
};

// onMounted(async () => {
//   await fetchData();
// });

const fetchData = async () => {
  console.log('asset', props.asset);
  if (props.asset.id === undefined) {
    console.error('认为是undefined');
  } else {
    console.error('认为不是undefined');
    loading.value = true;
    const res = await listLifecycleRecordApi(props.asset.id);
    console.log('listLifecycleRecordApi', res);
    lifecycleList.value = res;
    // const res = await lifecycleApi({
    //   assetId: asset.assetId,
    // });
    // lifecycleList.value = res;
  }
};
</script>
<template>
  <a-modal
    :visible="open"
    title="资产详情"
    width="60%"
    @ok="onClose"
    @cancel="onClose"
  >
    <!--    <div style="font-weight: bold; line-height: 48px">基础信息</div>-->
    <CustomTitle title="基础信息" size="14" />
    <a-descriptions>
      <a-descriptions-item label="资产编码">
        {{ asset.assetCode }}
      </a-descriptions-item>
      <a-descriptions-item label="资产名称">
        {{ asset.assetName }}
      </a-descriptions-item>
      <a-descriptions-item label="RFID芯片码">
        {{ asset.epc }}
      </a-descriptions-item>
      <!--      <a-descriptions-item label="所属客户">-->
      <!--        {{ asset.clientName }}-->
      <!--      </a-descriptions-item>-->
      <a-descriptions-item label="所在楼层">
        {{ asset.assetFloor }}
      </a-descriptions-item>
      <a-descriptions-item label="资产位置">
        {{ asset.assetAddress }}
      </a-descriptions-item>
      <a-descriptions-item label="资产照片">
        {{ asset.image }}
      </a-descriptions-item>

      <a-descriptions-item label="资产颜色">
        {{ asset.color }}
      </a-descriptions-item>
      <a-descriptions-item label="资产尺寸">
        {{ asset.size }}
      </a-descriptions-item>
      <a-descriptions-item label="资产品牌">
        {{ asset.brand }}
      </a-descriptions-item>
    </a-descriptions>
    <CustomTitle title="盘点信息" size="14" />
    <a-descriptions>
      <a-descriptions-item label="标签状态">
        <a-tag v-if="asset.tagStatus === '正常'" color="blue">
          {{ asset.tagStatus }}
        </a-tag>
        <a-tag v-else-if="asset.tagStatus === '标签卷边'" color="orange">
          {{ asset.tagStatus }}
        </a-tag>
        <a-tag v-else-if="asset.tagStatus === '无标签'" color="red">
          {{ asset.tagStatus }}
        </a-tag>
        <a-tag v-else color="default">{{ asset.tagStatus }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="盘点状态">
        <a-tag v-if="asset.inventoryStatus === '0'" color="red"> 未盘 </a-tag>
        <a-tag v-else-if="asset.inventoryStatus === '1'" color="green">
          新增
        </a-tag>
        <a-tag v-else-if="asset.inventoryStatus === '2'" color="blue">
          已盘
        </a-tag>
        <a-tag v-else-if="asset.inventoryStatus === '3'" color="orange">
          已盘
        </a-tag>
        <a-tag v-else color="default">
          未知状态码：{{ asset.inventoryStatus }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="盘点时间">
        {{ asset.inventoryTime }}
      </a-descriptions-item>

      <a-descriptions-item label="备注" :span="3">
        {{ asset.remark }}
      </a-descriptions-item>
    </a-descriptions>
    <CustomTitle title="盘点历史" size="14" />
    <a-timeline v-if="lifecycleList.length > 0">
      <a-timeline-item v-for="item in lifecycleList" :key="item.id">
        <p style="color: #aaa">{{ item.createTime }}</p>
        <div>{{ item.eventContent }}</div>
        <div style="font-size: 12px; color: #aaa">
          操作人员：{{ item.eventOperator }}
        </div>
      </a-timeline-item>
    </a-timeline>
    <a-empty v-else />
  </a-modal>
</template>
<style scoped></style>
